<template>
  <div>
    <h1 style="text-align: center">用户详情信息注册表</h1>
    <table class="table table-borderd">
      <tr>
        <td align="right">真实姓名：</td>
        <td><input type="text" v-model="state.U_Name" /></td>
      </tr>
      <tr>
        <td align="right">身份证号：</td>
        <td><input type="text" v-model="state.U_IdCard" maxlength="18" /></td>
      </tr>
      <tr>
        <td align="right">用户类型：</td>
        <td>
          <select v-model="state.UL_Id">
            <option value="0">请选择</option>
            <option v-for="item in list" :value="item.UT_Id">
              {{ item.UT_Name }}
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right">联系方式：</td>
        <td><input type="text" v-model="state.U_Phone" maxlength="11" /></td>
      </tr>
      <tr>
        <td align="right">出生日期：</td>
        <td><input type="date" v-model="state.U_Date" /></td>
      </tr>
      <tr>
        <td align="right">性别：</td>
        <td>
          <input type="radio" name="sex" v-model="state.U_Sec":value="true"checked/>男
          <input type="radio" name="sex" v-model="state.U_Sec":value="false"/>女
        </td>
      </tr>
      <tr>
        <td align="right">年收入：</td>
        <td><input type="text" v-model="state.U_Income" /></td>
      </tr>
      <tr>
        <td align="right"></td>
        <td>
          <input
            type="button"
            value="保存"
            class="btn btn-success"
            @click="save"
          />
          <input type="button" value="返回" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const toute = useRoute();

//数据*---------------------------
//点击保存
const save = () => {
  //1.验证非空和有效行
  if (state.value.U_Name == '') {
    alert('姓名不能为空');
    return;
  }
  if (state.value.U_IdCard == '') {
    alert('身份证号不能为空');
    return;
  }
  let reg = /^\d{17}[0-9x]$/i;
  if (reg.test(state.value.U_IdCard) == false) {
    alert('身份号码不符合要求');
    return;
  }
  if (state.value.UL_Id == 0) {
    alert('下拉框请选择');
    return;
  }
  if (state.value.U_Phone == '') {
    alert('联系方式不能为空');
    return;
  }
  if (state.value.U_Date == '') {
    alert('日期不能为空');
    return;
  }
  if (state.value.U_Income == '') {
    alert('年收入不能为空');
    return;
  }
  if (isNaN(state.value.U_Income) == true) {
    alert('请输入数字');
    return;
  }
  if (state.value.U_Income < 100000) {
    alert('不能小于100000');
    return;
  }
  //2.发送请求
  axios({
    url:'/api/Users/PostAddUserInfor',
    method: 'post',
    data: state.value
  })
    .then((res) => {
      console.log(res);
      if (res.data.data > 0) {
        alert('保存成功')
        router.push('/userInfo');
      }
    })
    .catch((err) => {
      console.log(err);
    });

  //2.发送请求
};
let data: any = reactive({
  list: [],
  state: {
    U_Name: '',
    U_Phone: '',
    U_Date: '',
    U_Sec: true,
    U_Income: '',
    U_IdCard: '',
    UL_Id: 0,
    UT_Id: toute.query.UL_Id
  }
});
let { list, state } = toRefs(data);
//就绪函数
onMounted(() => {
  getUserType();
});
//绑定下拉框
const getUserType = () => {
  axios({
    url: '/api/Users/GetUserTypes',
    method: 'get'
  })
    .then((res) => {
      console.log(res);
      list.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
